<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else style="width: 100%; height: 100%">
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const bian = ref("双边");
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  SpcAnalysis: {
    type: Array,
    default: () => {
      [
        {
          pointValues: []
        }
      ];
    },
    required: true
  }
});

const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  chartsList: [],
  pointUnit: "",
  name: "",
  series: [],
  yAxis: []
});

function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
console.log(props);
const { option, chartsList, series, yAxis } = toRefs(state);
watch(
  () => props.SpcAnalysis,
  newOption => {
    isShowEcharts.value = false;
    console.log(newOption);
    if (newOption.length > 0 && newOption[0].pointValues != null) {
      isShowEcharts.value = true;
      // console.log(newOption);
      chartsList.value = newOption[0].pointValues;
      yAxis.value = [
        {
          type: "value",
          name: newOption[0].indicatorName,
          nameLocation: "middle", //居中
          nameGap: 70, //轴线距离
          nameRotate: 90, //字体选择角度
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid"
            }
          }
        }
      ];
      series.value = [
        {
          // data: [400, 400, 400, 400, 400, 400],
          data: chartsList.value.length > 0 ? chartsList.value.map(item => item.value) : [],
          type: "line",
          name: newOption[0].indicatorName,
          // areaStyle: {
          //   opacity: 0.15
          // },
          // symbol: "none",
          markLine: {
            symbol: "none",
            data: [
              {
                name: "USL值",
                yAxis: Number(newOption[0].uslValue),
                lineStyle: {
                  color: "#A600FF",
                  wideh: "1",
                  type: "solide"
                },
                label: {
                  position: "end",
                  formatter: `USL值${newOption[0].uslValue}`,
                  color: "#A600FF"
                }
              },
              {
                name: "UCL值",
                yAxis: Number(newOption[0].uclValue),
                lineStyle: {
                  color: "#FF0000",
                  wideh: "1",
                  type: "dashed"
                },
                label: {
                  position: "end",
                  formatter: `UCL值${newOption[0].uclValue}`,
                  color: "#FF0000"
                }
              },
              {
                name: "UWL值",
                yAxis: Number(newOption[0].uwlValue),
                lineStyle: {
                  color: "#FF9900",
                  wideh: "1",
                  type: "dashed"
                },
                label: {
                  position: "end",
                  formatter: `UWL值${newOption[0].uwlValue}`,
                  color: "#FF9900"
                }
              },
              {
                name: "Target值",
                yAxis: Number(newOption[0].targetValue),
                lineStyle: {
                  color: "#00E272",
                  wideh: "1",
                  type: "solide"
                },
                label: {
                  position: "end",
                  formatter: `Target值${newOption[0].targetValue}`,
                  color: "#00E272"
                }
              },
              {
                name: "LWL值",
                yAxis: Number(newOption[0].lwlValue),
                lineStyle: {
                  color: "#FF9900",
                  wideh: "1",
                  type: "dashed"
                },
                label: {
                  position: "end",
                  formatter: `LWL值${newOption[0].lwlValue}`,
                  color: "#FF9900"
                }
              },
              {
                name: "LCL值",
                yAxis: Number(newOption[0].lclValue),
                lineStyle: {
                  color: "#FF0000",
                  wideh: "1",
                  type: "dashed"
                },
                label: {
                  position: "end",
                  formatter: `LCL值${newOption[0].lclValue}`,
                  color: "#FF0000"
                }
              },
              {
                name: "LSL值",
                yAxis: Number(newOption[0].lslValue),
                lineStyle: {
                  color: "#A600FF",
                  wideh: "1",
                  type: "solide"
                },
                label: {
                  position: "end",
                  formatter: `LSL值${newOption[0].lslValue}`,
                  color: "#A600FF"
                }
              }
            ]
          }
        }
      ];
      cleardata();
      setdata();
    } else {
      chartsList.value = [];
    }
    console.log(newOption);
  }
);
const cleardata = () => {
  option.value = {};
};
const setdata = () => {
  option.value = {
    color: [props.color],
    grid: {
      left: "60px",
      top: "40px",
      right: "100px",
      bottom: "10px",
      containLabel: true
    },
    legend: {},
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: chartsList.value.length > 0 ? chartsList.value.map(item => formatDate(item.time)) : ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
    },
    yAxis: yAxis.value,
    series: series.value
  };
};
// setdata();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
</style>
